<template>
    <view class="container">
        <!-- Custom Header -->
        <view class="custom-header">
            <view class="header-center">
                <text class="header-title">{{ memorialDetail.title }}网上祭奠纪念馆</text>
                <text class="header-subtitle">www.cqjsyh.com</text>
            </view>
            <view class="header-right">
                <text class="header-link">登录/注册</text>
                <view class="header-icon-wrapper">
                    <text class="header-icon user-icon"></text> <!-- Use actual user icon -->
                    <text class="red-dot"></text> <!-- Red dot notification -->
                </view>
                <text class="header-icon menu-icon">⋮</text> <!-- Use actual menu icon -->
            </view>
        </view>



        <!-- Main Content -->
        <view class="main-content">

            <!-- Memorial Title (Repeated here) -->
            <text class="memorial-page-title">怀念{{ memorialDetail.name }}</text>

            <!-- Guestbook Section -->
            <view class="guestbook-section">
                <view class="guestbook-header">
                    <text class="section-title">最新留言</text>
                    <view class="action-link" @click="goToSacrifice">
                        <text class="action-icon"></text> <!-- Use actual icon -->
                        <text>发表追思</text>
                    </view>
                </view>

                <!-- Guestbook Entries (Using sample data) -->
                <view class="guestbook-list">
                    <view class="guestbook-entry" v-for="(entry, index) in leaveNoteList" :key="index">
                        <view class="entry-image-wrapper">
                            <image class="entry-image" :src="entry.jidian_info.file_url" mode="aspectFit" v-if="entry.jidian_info.file_type != 2"></image>
                            <image class="entry-image" src="/static/audio_img.jpg" mode="aspectFit" v-if="entry.jidian_info.file_type == 2"></image>
                        </view>
                        <view class="entry-text-area">
                            <text class="entry-content">{{ entry.content }}</text>
                            <view class="entry-info">
                                <text class="user-info">{{ entry.sign_name }}</text> <!-- Use actual icon -->
                                <text class="timestamp">{{ entry.jidian_info.create_time }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- Pagination -->
                <!-- <view class="pagination-section">
                    <text class="total-comments">共有{{totalComments}}条留言</text>
                    <view class="pagination-controls">
                        <button class="pagination-button" :disabled="currentPage === 1" @click="prevPage">上一页</button>
                        <view class="page-picker-wrapper">
                            <picker mode="selector" :range="pageOptions" :value="currentPage - 1" @change="bindPageChange">
                                <view class="page-picker-text">第{{currentPage}}页</view>
                            </picker>
                            <text class="picker-arrow">▼</text>
                        </view>
                        <button class="pagination-button" :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
                    </view>
                </view> -->
                <pagination :total="totalPages" :current="currentPage" :pageSize="pageSize" @change="changePage"/>
            </view>
            <!-- End Guestbook Section -->

            <!-- Offering Bar (Bottom Bar within main content) -->
            <!-- <view class="offering-bar">
                <view class="offering-item">
                    <image class="offering-icon" src="/static/flower-icon.png" mode="aspectFit"></image>
                    <text class="offering-label">献花</text>
                </view>
                <view class="offering-item">
                    <image class="offering-icon" src="/static/fruit-icon.png" mode="aspectFit"></image>
                    <text class="offering-label">献供</text>
                </view>
                <view class="offering-item">
                    <image class="offering-icon" src="/static/candle-icon.png" mode="aspectFit"></image>
                    <text class="offering-label">点烛</text>
                </view>
                <view class="offering-item">
                    <image class="offering-icon" src="/static/incense-icon.png" mode="aspectFit"></image>
                    <text class="offering-label">上香</text>
                </view>
                <view class="offering-item">
                    <image class="offering-icon" src="/static/wine-icon.png" mode="aspectFit"></image>
                    <text class="offering-label">敬酒</text>
                </view>
                <view class="offering-item">
                    <image class="offering-icon" src="/static/music-icon.png" mode="aspectFit"></image>
                    <text class="offering-label">献歌</text>
                </view>
            </view> -->
            <!-- End Offering Bar -->

        </view>
        <!-- End Main Content -->


        <!-- Footer -->
        <Footer></Footer>

        <!-- No Floating Button shown in this screenshot -->

    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, onMounted, reactive } from 'vue';
import { apiMuLeaveNoteList } from '@/api/leaveNote.js'
import { apiMuDetail } from '@/api/graveyard'
import pagination from '@/components/pagination/index.vue'
import Footer from '@/components/footer/index.vue'
const mu_id = ref()
// 留言列表
const leaveNoteList = ref([])
const leaveNoteCount = ref(0)
const getApiMuLeaveNoteList = async () => {
    await apiMuLeaveNoteList({ mu_id: mu_id.value }).then(res => {
        console.log(res)
        if (res.code == 1) {
            leaveNoteList.value = [...leaveNoteList.value, ...res.data.list]
            leaveNoteCount.value = res.data.total
        }
    }).catch(error => {
        console.log(error)
    })

}

onLoad(async (options) => {
    mu_id.value = options.id
    getApiMuLeaveNoteList()
})

// Pagination data
const totalComments = ref(13194);
const currentPage = ref(1);
const pageSize = ref(10); // Assuming 10 entries per page based on typical lists
const totalPages = computed(() => Math.ceil(leaveNoteCount.value / pageSize.value));

// Generate page options for the picker (e.g., ['第1页', '第2页', ...])
const pageOptions = computed(() => {
    const options = [];
    for (let i = 1; i <= totalPages.value; i++) {
        options.push(`第${i}页`);
    }
    return options;
});


// Pagination methods (basic logic)
const prevPage = () => {
    if (currentPage.value > 1) {
        currentPage.value--;
        // In a real app, you would load data for the new page here
        console.log('Go to previous page:', currentPage.value);
    }
};

const nextPage = () => {
    if (leaveNoteCount.value > leaveNoteList.value.length && currentPage.value < totalPages.value) {
        currentPage.value++;
        // In a real app, you would load data for the new page here
        console.log('Go to next page:', currentPage.value);
    }
};

const bindPageChange = (e) => {
    const selectedIndex = e.detail.value;
    currentPage.value = selectedIndex + 1;
    // In a real app, you would load data for the new page here
    console.log('Go to page:', currentPage.value);
};


// Example methods for header navigation (replace with actual Uniapp routing)
const goBack = () => {
    console.log('Go back');
    // uni.navigateBack();
};


// 去祭奠
const goToSacrifice = () => {
    uni.navigateTo({
        url: '/pages/sacrifice/index?id=' + mu_id.value
    })
}


const memorialDetail = ref<{
    [key: string]: any
}>({})
// 获取纪念馆详情
const getMemorialDetail = async () => {
    try {
        const res = await apiMuDetail({ id: mu_id.value })
        console.log(res)
        memorialDetail.value = res.data
        console.log(memorialDetail.value)
    } catch (err) {
        console.error('获取纪念馆详情失败:', err)
    }
}

// 页码变化
const changePage = (page_no) => {
    currentPage.value = page_no
    getApiMuLeaveNoteList()
}

onMounted(async () => {
    await getMemorialDetail()
})
</script>

<style scoped>
/* Scoped styles for this page */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Ensure container takes full height */
    background-color: #f5f5f5;
    /* Match background color */
    padding-bottom: 120rpx;
    /* Add sufficient padding at the bottom to avoid footer overlap */
    box-sizing: border-box;
    /* Include padding in height calculation */
}

/* Custom Header Styles - Copied from previous page */
.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    /* Standard header height */
    padding: 0 20rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
}

.header-left {
    width: 60rpx;
    text-align: left;
}

.header-icon {
    font-size: 40rpx;
    color: #333;
}

.header-center {
    flex-grow: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.header-title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-subtitle {
    font-size: 20rpx;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right {
    display: flex;
    align-items: center;
    width: 240rpx;
    justify-content: flex-end;
}

.header-link {
    font-size: 26rpx;
    color: #ff9800;
    margin-right: 15rpx;
}

.header-icon-wrapper {
    position: relative;
    margin-left: 15rpx;
    margin-right: 15rpx;
}

.user-icon {
    font-size: 40rpx;
    color: #ff9800;
}

.menu-icon {
    font-size: 40rpx;
}

.red-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 15rpx;
    height: 15rpx;
    background-color: red;
    border-radius: 50%;
}


/* Sub-Banner Styles - Copied from previous page */
.sub-banner {
    width: 100%;
    height: 150rpx;
    position: relative;
    overflow: hidden;
}

.sub-banner-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f0f0e0;
    /* Placeholder color/gradient if no image */
}

.sub-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx;
}

.sub-banner-left {
    width: 150rpx;
}

.sub-banner-right {
    display: flex;
    align-items: flex-end;
    color: #333;
}

.banner-title-area {
    display: flex;
    align-items: flex-end;
}

.banner-main-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 10rpx;
}

.banner-sub-area {
    display: flex;
    flex-direction: column;
    font-size: 20rpx;
}

.banner-url {
    font-size: 18rpx;
    color: #666;
}

/* Main Content Styles */
.main-content {
    padding: 30rpx;
    background-color: #f5f5f5;
    /* Match background color */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center some content if needed, or remove */
}

/* Memorial Title */
.memorial-page-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
}

/* Guestbook Section */
.guestbook-section {
    width: 100%;
    /* Take full width */
    background-color: #fff;
    /* White background */
    border-radius: 10rpx;
    padding: 30rpx;
    /* Inner padding */
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    box-sizing: border-box;
    /* Include padding in width */
    margin-bottom: 30rpx;
    /* Space below the section */
}

.guestbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
    /* Separator below header */
    margin-bottom: 20rpx;
    /* Space below separator */
}

.section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
}

.action-link {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #ff9800;
    /* Orange color */
}

.action-icon {
    margin-right: 5rpx;
    font-size: 30rpx;
    /* Adjust icon size */
    color: #ff9800;
    /* Orange icon color */
}

/* Guestbook List and Entries */
.guestbook-list {
    /* No specific styles needed here, children handle layout */
}

.guestbook-entry {
    display: flex;
    padding: 20rpx 0;
    /* Vertical padding for each entry */
    border-bottom: 1rpx solid #eee;
    /* Separator between entries */
}

.guestbook-entry:last-child {
    border-bottom: none;
    /* No border for the last entry */
}

.entry-image-wrapper {
    width: 100rpx;
    /* Fixed size for image wrapper */
    height: 100rpx;
    margin-right: 20rpx;
    /* Space between image and text */
    border-radius: 5rpx;
    /* Subtle border radius */
    overflow: hidden;
    /* Clip image */
    background-color: #f0f0f0;
    /* Placeholder background */
}

.entry-image {
    width: 100%;
    height: 100%;
}

.entry-text-area {
    flex: 1;
    /* Text area takes remaining space */
    display: flex;
    flex-direction: column;
    font-size: 26rpx;
    color: #333;
}

.entry-content {
    margin-bottom: 10rpx;
    white-space: pre-wrap;
    /* Preserve line breaks from sample data */
    word-break: break-word;
    /* Break long words if needed */
}

.entry-info {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #999;
    margin-top: 10rpx;
    /* Space above info line */
}

.user-info {
    margin-right: 20rpx;
    /* Space between user and time */
}

.user-info text {
    /* Style for the user icon within the user info text */
    margin-right: 5rpx;
}

.timestamp {
    /* No specific style needed */
}

/* Pagination Section */
.pagination-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    /* Space above pagination */
}

.total-comments {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.pagination-controls {
    display: flex;
    align-items: center;
}

.pagination-button {
    /* Uniapp button default styles need override */
    height: 60rpx;
    /* Button height */
    line-height: 60rpx;
    font-size: 26rpx;
    color: #333;
    background-color: #eee;
    /* Light gray background */
    border: 1rpx solid #ddd;
    /* Border */
    border-radius: 8rpx;
    padding: 0 20rpx;
    margin: 0 10rpx;
    /* Space between buttons */
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-button[disabled] {
    background-color: #f5f5f5;
    color: #bbb;
    border-color: #eee;
}

/* Picker styled as a button */
.page-picker-wrapper {
    position: relative;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #333;
    background-color: #fff;
    /* White background */
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    margin: 0 10rpx;
    padding: 0 30rpx 0 20rpx;
    /* Padding to make space for arrow */
    display: flex;
    align-items: center;
    min-width: 100rpx;
    /* Minimum width */
}

.page-picker-text {
    flex: 1;
    text-align: center;
    /* Center the page number */
}

.picker-arrow {
    position: absolute;
    right: 10rpx;
    font-size: 24rpx;
    color: #666;
}

/* Offering Bar (Fixed at the bottom of the screen) */
/* This bar is NOT fixed to the screen, it's at the bottom of the content */
.offering-bar {
    display: flex;
    justify-content: space-around;
    /* Distribute items evenly */
    width: 100%;
    padding: 20rpx 0;
    /* Vertical padding */
    margin-top: 40rpx;
    /* Space above the bar */
    background-color: #fff;
    /* White background */
    border-top: 1rpx solid #eee;
    /* Top border */
    box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.05);
    /* Subtle shadow at the top */
}

.offering-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offering-icon {
    width: 50rpx;
    /* Size of icon image */
    height: 50rpx;
    margin-bottom: 5rpx;
    /* Smaller margin below icon */
}

.offering-label {
    font-size: 22rpx;
    /* Smaller font size */
    color: #555;
}


/* Footer Styles - Copied from previous page */
/* Adjusting position to be truly at the bottom, below all content */
.footer {
    width: 100%;
    /* Take full width */
    padding: 40rpx 20rpx;
    background-color: #f0f0f0;
    /* Light gray background */
    text-align: center;
    margin-top: auto;
    /* Push footer to the bottom if content is short */
    box-sizing: border-box;
}

.footer-links {
    font-size: 26rpx;
    color: #555;
    margin-bottom: 10rpx;
}

.footer-links text {
    margin: 0 10rpx;
}

.footer-copyright {
    font-size: 22rpx;
    color: #888;
}
</style>